<template>
  <div class="flex-box container">
    <div class="flex-box__left">
      <img
        src="http://nihaocai.oss-cn-hangzhou.aliyuncs.com/userstmp/C8PHbTyLN73f6YKTLsOGWbMsV4Iet89nGHN4jt1F.png" 
        width="428px" 
        height="auto" 
        v-if="rowList.length">
      <draggable 
        class="row-group" 
        v-model="rowList">
        <row 
          v-for="(row, rowIndex) in rowList" 
          :key="rowIndex" 
          :row-index="rowIndex" 
          @activeRow="activeRow"
          :current-row="currentRow">

          <scroll-good-list 
            slot="body" 
            v-if="row.type === 'scrollGood'" 
            :scroll-good-data.sync="row.list"/>

          <flex-img-list
            slot="body" 
            v-if="row.type === 'flexImg'" 
            :flex-img-data.sync="row.list"/>

          <like-list
            slot="body" 
            v-if="row.type === 'like'" 
            :like-data.sync="row.list"/>

          <swiper-list
            slot="body" 
            v-if="row.type === 'swiper'" 
            :flex-img-data.sync="row.list"/>

          <nav-list 
            slot="body"
            v-if="row.type === 'nav'"
            :nav-data.sync="row.list"/>

            <dish-list 
            slot="body"
            v-if="row.type === 'dish'"
            :dish-data.sync="row.list"/>

        </row>
      </draggable>
      <img
        src="http://nihaocai.oss-cn-hangzhou.aliyuncs.com/userstmp/263uVYRor1AGNeVXL5hfW4BE0pWCQ0bzNaTMRJkq.png" 
        width="428px" 
        height="auto" 
        v-if="rowList.length">
      <div class="flex-box button-group">
        <el-button
          v-for="item in typeList"
          :key="item.type"
          type="primary" 
          class="button-group__item" 
          @click.native="addRow(item.type)">{{ item.label }}</el-button>
      </div>
      <div class="flex-box button-group">
        <el-button 
          type="success" 
          class="button-group__item" 
          @click.native="saveAll">保存</el-button>
      </div>
    </div>
    <div class="flex-box__right">
      <div 
        class="active-action" 
        v-for="(row, rowIndex) in rowList" 
        :key="rowIndex"
        v-if="rowIndex === currentRow">

        <scroll-good-action 
          v-if="row.type==='scrollGood'"
          :category-list.sync="categoryList"
          @assertGoodList="assertGoodList"
          @currentRowChanged="currentRowChanged"
          :current-data.sync="row.list"/>

        <flex-img-action
          v-if="row.type==='flexImg'"
          :category-list.sync="categoryList"
          :current-data.sync="row.list"
          @currentRowChanged="currentRowChanged"/>

        <like-action
          v-if="row.type==='like'"
          :category-list.sync="categoryList"
          :current-data.sync="row.list"
          @currentRowChanged="currentRowChanged"/>

        <swiper-action
          v-if="row.type==='swiper'"
          :category-list.sync="categoryList"
          :current-data.sync="row.list"
          @currentRowChanged="currentRowChanged"/>

        <nav-action
          v-if="row.type==='nav'"
          :category-list.sync="categoryList"
          :current-data.sync="row.list"
          @currentRowChanged="currentRowChanged"/>

        <dish-action
          v-if="row.type==='dish'"
          :category-list.sync="categoryList"
          :current-data.sync="row.list"
          @assertGoodList="assertGoodList"
          @currentRowChanged="currentRowChanged"/> 

        <el-button 
          type="danger" 
          plain 
          style="margin:20px auto 0 auto;" 
          @click.native="removeRow">删 除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import draggable from 'vuedraggable';

import Row from './basic/Row';
import ScrollGoodList from './basic/scrollGood/ScrollGoodList';
import ScrollGoodAction from './basic/scrollGood/ScrollGoodAction';
import FlexImgAction from './basic/flexImg/FlexImgAction';
import FlexImgList from './basic/flexImg/FlexImgList';
import SwiperList from './basic/swiper/SwiperList';
import SwiperAction from './basic/swiper/SwiperAction';
import NavAction from './basic/nav/NavAction';
import NavList from './basic/nav/NavList';
import DishAction from './basic/dish/DishAction';
import DishList from './basic/dish/DishList';
import LikeAction from './basic/like/LikeAction';
import LikeList from './basic/like/LikeList';

export default {
  components: {
    Row,
    ScrollGoodList,
    ScrollGoodAction,
    FlexImgAction,
    FlexImgList,
    SwiperAction,
    SwiperList,
    draggable,
    NavAction,
    NavList,
    DishAction,
    DishList,
    LikeAction,
    LikeList
  },
  data() {
    return {
      scrollGoodData: [],
      categoryList: [],
      rowList: [],
      currentRow: -1,
      currentData: [],
      currentType: '',
      typeList: [
        { type: 'scrollGood', label: '滚动商品' },
        { type: 'flexImg', label: '条形图' },
        { type: 'swiper', label: '轮播图' },
        { type: 'nav', label: '导航栏' },
        { type: 'like', label: '猜你喜欢' },
        { type: 'dish', label: '包装菜品' }
      ]
    };
  },
  created() {
    this.getCategoryList();
    this.getLayouts();
  },
  methods: {
    getLayouts() {
      axios
        .get('https://nihaocai.zkong.me/api/configs_by_group/layout')
        .then(res => res.data.data.index_layout)
        .then(rowList => {
          this.rowList = rowList;
        });
    },
    getCategoryList() {
      axios
        .get('https://nihaocai.zkong.me/api/categories', {
          params: {
            is_all: 1
          }
        })
        .then(res => res.data.data.map(item => this.genCategory(item)))
        .then(categoryList => {
          this.categoryList = categoryList;
        });
    },
    genCategory({ id, name }) {
      return { value: id, label: name };
    },
    assertGoodList(id, goodList) {
      const index = this.categoryList.findIndex(item => item.value === id);
      Object.assign(this.categoryList[index], { children: goodList });
    },
    currentRowChanged(data) {
      this.rowList[this.currentRow].list = data;
    },
    addRow(type) {
      this.rowList.push({ type, list: [] });
    },
    activeRow(rowIndex) {
      this.currentRow = rowIndex;
      this.currentData = this.rowList[this.currentRow].list;
      this.currentType = this.rowList[this.currentRow].type;
    },
    removeRow() {
      this.rowList.splice(this.currentRow, 1);
      this.currentRow = -1;
    },
    saveAll() {
      const json = JSON.stringify(this.rowList);
      axios.post('https://nihaocai.zkong.me/api/setting/index_layout', { json }).then(res => {
        this.$notify({
          title: '成功',
          message: '首页设置成功',
          type: 'success'
        });
      });
    },
    switchUp(index) {
      if (index < 1) return;
      const prev = this.rowList[index];
      const target = this.rowList[index - 1];
      this.rowList[index] = target;
      this.rowList[index - 1] = prev;
    }
  }
};
</script>

<style>
.container {
  margin: 0 auto;
}
.flex-box {
  display: flex;

  box-sizing: border-box;
}
.flex-box__left {
  width: 445px;
}
.flex-box__right {
  max-width: 445px;
}
.button-group {
  width: 375px;
  margin-top: 30px;
  margin-left: 27px;
}
.button-group__item {
  flex: 1;
}
.active-action {
  position: fixed;
  top: 50px;
}
.item-color-box {
  border-radius: 4px;
  padding: 14px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  background: #67c23a;
  width: 174px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
